/** * @Author: Joker * @Date: 2017/12/6 */
<template>
  <div class="body_content">
    <el-collapse v-model="activeNames">
      <el-collapse-item :name="d.flowId" v-for="d in data" :key="d.flowId">
        <template slot="title">
          {{d.flowName}}
          <i class="fa fa-times icon" style="margin-right: 14px;"></i>
          <i class="fa fa-refresh icon"></i>
        </template>
        <div class="content">
          <!-- <el-button type="info" size="small" class="operate">查看详情</el-button> -->
          <div class="content_panel">
            <div>
              <span>项目名称</span>
              <p>{{d.projectName}}</p>
            </div>
            <div>
              <span>施工单位</span>
              <p>{{d.constructDeptName}}</p>
            </div>
          </div>
          <div v-if="d.projectId">
            <div class="content_panel content_panel_space">
              <div>
                <span>监理单位</span>
                <p>{{d.supervisorDeptName}}</p>
              </div>
              <div>
                <span>业主单位</span>
                <p>{{d.detectionDeptName}}</p>
              </div>
              <div>
                <span>进场人数</span>
                <p>xx施工单位</p>
              </div>
            </div>
            <div class="content_panel content_panel_space third_construction index_press">
              <Step :data="d.flowProcesses" />
            </div>
          </div>
          <div v-else>
            <div class="content_panel content_panel_space">
              <div>
                <span>监理单位</span>
                <p>xx不停航施工</p>
              </div>
              <div>
                <span>合同段</span>
                <p>xx施工单位</p>
              </div>
            </div>
            <div class="content_panel content_panel_space third_monitor">
              <div>
                <span>层数</span>
                <p>xx不停航施工</p>
              </div>
              <div>
                <span>高程(m)</span>
                <p>xx施工单位</p>
              </div>
              <div>
                <span>施铺厚度(cm)</span>
                <p>xx不停航施工</p>
              </div>
              <div>
                <span>含水比(%)</span>
                <p>xx施工单位</p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import Step from "../../components/proSteps";
  export default {
    props: {
      data: {
        type: Array
      }
    },
    components: {
      Step
    },
    data() {
      return {
        activeNames: ['1'],
      }
    },
    watch: {
      data(newval) {
        this.activeNames = [];
        for (let i of newval) {
          //i.flowProcesses = this.formatFlowFirst(i.flowProcesses);
          this.activeNames.push(i.flowId);
        }
      }
    },
    methods:{
    }
  }

</script>
<style scoped>
  .content {
    position: relative;
  }

  .content span {
    font-size: 12px;
    font-weight: bold;
    color: #999;
  }

  .content p {
    font-size: 14px;
    color: #333;
  }

  .operate {
    position: absolute;
    top: -16px;
    right: 14px;
    background: #999;
    width: 80px;
    font-size: 12px;
    font-weight: bold;
  }

  .icon {
    font-size: 16px;
    float: right;
    margin-right: 12px;
    margin-top: 8px;
    cursor: pointer;
  }

  .content_panel {
    display: flex;
  }

  .content_panel_space {
    margin-top: 20px;
  }

  .content_panel div {
    margin-right: 40px;
  }

  .third_construction {
    width: 100%;
    height: 168px;
    margin-top: 15px;
    background: url("../../assets/home_card_lc_pc_11.png") no-repeat;
    background-size: cover;
    border-radius: 2px;
  }

  .third_monitor p {
    color: #0e8dea;
  }

</style>

